<div class="container pt-5">
  <div class="row">
    <div class="text-center">
      <h1 class="h5">Components Features</h1>
      <hr>
    </div>
  </div>
  <div class="row">
    <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 p-4">
      <div class="row">
        <div class="nga-card-component text-center">
          <h5 class="card-title text-primary p-2">{{ channelSelected.title }}</h5>
          <h5 class="card-title">{{ channelSelected.releaseDate }}</h5>
          <div *ngIf="!channelSelected.name" class="card-body">
            <div class="alert alert-info" role="alert">
              Select a channel on the list<br><br>
              <i class="fas fa-arrow-alt-circle-right ms-4 fa-2x"></i>
              <br>
            </div>
          </div>
          <div *ngIf="channelSelected.name" class="card-body text-center">
            <img src="assets/params/images/channels/{{ channelSelected.name }}.jpg" class="img-thumbnail"
              alt="channel.name">
            <button type="button" class="btn btn-info mt-2" (click)="onReset()">Reset</button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
      <div class="row">
        <div *ngFor="let channel of channels; let i=index" class="col-6 col-sm-6 col-md-4 col-lg-3 col-xl-3">
          <app-channel [channel]="channel" [index]="i + 1" (selected)="onSelected($event)"></app-channel>
        </div>
      </div>
    </div>
  </div>
</div>